<template>
  <div>
    <!-- 表头分开写 -->
    <div></div>
    <!-- 表格内容 -->
    <div class="table-container" :style="customTableFlex">
      <div class="switch-btn-group">
        <button class="switch-btn-left" @click="handleAnalyse">批量审核</button>
        <button class="switch-btn-right" @click="handleBack">审核记录</button>
        <button class="switch-btn-right" @click="handleViewPlan">查看方案</button>
      </div>


      <!-- 表格区域 -->
      <!-- 表头部分 -->
      <div class="table-header">
        <table>
          <thead>
            <tr>
              <th v-for="(column, index) in columns" :key="index" :style="{ height: '40px', width: column.width }">
                {{ column.label }}
              </th>
            </tr>
          </thead>
        </table>
      </div>

      <div class="table-location">
        <div class="table-wrapper table1" :style="{ height: computedHeight }">
          <table>
            <tbody>
              <tr v-for="(row, rowIndex) in customTableData" :key="rowIndex"
                :class="{ 'table-row-selected': row.isSelected, 'table-row': !row.isSelected }"
                @mouseover="handleHover(row, rowIndex)" @mouseleave="handleMouseLeave(row, rowIndex)"
                @click="$emit('rowClick', row)" :style="{ height: '32px', pointerEvents: 'auto' }">
                <!-- @click="handleClick(row, rowIndex)"@click="$emit('rowClick', row)" -->
                <!-- 后续列：显示原数据 -->
                <td v-for="(column, colIndex) in columns" :key="colIndex" :style="{ width: column.width }">
                  <template>
                    {{ row[column.prop] }}
                  </template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 展开和收起按钮 -->
        <button v-if="customTableData.length > 10 && customTableData.length < 17 && pageLengthnum === 1"
          class="table-retract-button-pr" @click="retractTable" :style="{
            top: buttonHeightForRetract(customTableData.length),
            pointerEvents: 'auto',
          }"></button>
        <button v-if="customTableData.length >= 11 && pageLengthnum === 0" class="table-expand-button"
          @click="expandTable" :style="{
            // top: buttonHeightList[pageLengthnum],
            pointerEvents: 'auto',
          }"></button>
        <button v-if="pageLengthnum === 1 && customTableData.length >= 17" class="table-retract-button-pr"
          @click="retractTable" :style="{
            // top: buttonHeightList[pageLengthnum],
            pointerEvents: 'auto',
          }"></button>
      </div>
    </div>
  </div>
</template>

<script>
import CustomSubmitDialogAdd from '@/components/CustomDialogModule2Add.vue';

export default {
  name: "CustomTableModule2PlanningSchemeCopy",
  components: {
    CustomSubmitDialogAdd,
  },
  props: {
    customTableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      isSelected: false,
      pageLengthnum: 0,
      pageLengList: ['32.2vh', '54.8vh'],
      buttonHeightList: ['32.2vh', '54.8vh'],
      addDialogVisible: false, // 控制弹窗显示与隐藏
    };
  },
  // mounted() {
  //   // 把原始数据复制三份模拟多数据
  //   this.customTableData.push(...JSON.parse(JSON.stringify(this.customTableData)));
  //   this.customTableData.push(...JSON.parse(JSON.stringify(this.customTableData)));
  //   console.log("复制后的this.customTableData", this.customTableData  )
  // },
  computed: {
    // 动态生成弹窗样式
    customTableFlex() {
      return {
        height: this.height
      };
    },
    computedHeight() {
      // 根据数据长度计算表格高度
      if (this.customTableData.length <= 10) {
        return `${3.22 * this.customTableData.length}vh`;
      } else {
        return this.pageLengList[this.pageLengthnum];
      }
    },
  },
  methods: {
    handleHover(row, index) {
      if (!this.isSelected) {
        this.$emit('viewDetailsHover', row);
      }
    },
    handleMouseLeave(row, index) {
      if (!this.isSelected) {
        this.$emit('hoverLeave', row);
      }
    },
    handleClick(clickedRow, index) {
      // 重置所有行的 isSelected 状态为 false，并使用 this.$set 确保响应式更新
      this.customTableData.forEach(row => {
        this.$set(row, 'isSelected', false); // 使用 $set 保证 Vue 响应式追踪
      });
      this.$set(clickedRow, 'isSelected', true); // 更新点击的行为选中状态
      // console.log(clickedRow.isSelected);
      this.$emit('viewDetails', clickedRow);
      this.isSelected = true;
    },
    resetSelection() {
      this.customTableData.forEach(row => {
        this.$set(row, 'isSelected', false); // 确保响应式更新
        this.isSelected = false;
      });
    },
    expandTable() {
      this.pageLengthnum = this.pageLengthnum + 1;
    },
    retractTable() {
      this.pageLengthnum = this.pageLengthnum - 1;
    },
    buttonHeightForRetract(length) {
      // 根据数据长度计算收起按钮的高度
      const rowHeight = 3.284;
      return length * rowHeight + "vh";
    },
    // 分析逻辑
    handleAnalyse() {
      this.$emit('open-dialog');
    },
    handleBack() {
      this.$router.push("/airspace-need");
    },
    // 切换Module3仅触发切换事件，无选中逻辑
    handleViewPlan() {
      this.$emit('view-plan-trigger'); // 无参数，仅通知“要切换”
    },
    refetchData() {
      // 重新获取数据的逻辑
      console.log("重新获取数据...");
      this.fetchTableData();
    },
    updateDialogVisibility(newValue) {
      this.addDialogVisible = newValue; // 更新弹窗显示状态
    },
  }
};
</script>

<style scoped>
.table-header {
  position: sticky;
  top: 0;
  background-color: transparent;
  z-index: 10;
  background-size: 100% 100%;
  /* width: 70%; */
}

/* 外层容器，使用 flex 布局 */
.table-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  pointer-events: none;
  /* background-color: yellow; */
}

/* 表格区域，设置为可滚动部分 */
.table-wrapper {
  /* flex-grow: 1; */
  height: 39vh;
  /* 设定表格容器的最大高度 */
  overflow-y: auto;
  /* 启用垂直滚动 */
  -ms-overflow-style: none;
  /* 隐藏滚动条:IE 和 Edge 浏览器 */
  scrollbar-width: none;
  /* 隐藏滚动条:Firefox 浏览器 */
}

/* 隐藏滚动条（适用于 WebKit 浏览器） */
.table-wrapper::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}

/* 表头样式 */
thead {
  background-color: transparent;
  background-image: url(../assets/img/module2/thead.png);
  position: sticky;
  background-size: 100% 100%;
  top: 0%;
  z-index: 2;
}


/* 表格样式 */
table {
  width: 100%;
  height: 60%;
  border-collapse: collapse;
  background-color: transparent;
  border-collapse: separate;
  /* 不合并单元格边框 */
  border-spacing: 0 3px;
  /* 为行设置 5px 的垂直间距 */

}

/* 表头单元格样式 */
th {
  /* padding: 1px; */
  text-align: left;
  color: #ffffff;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  font-weight: normal;
  padding-left: 15px;
  border: none;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font: 14px;

}

/* 表格内容单元格样式 */
td {
  /* padding: 1px; */
  text-align: left;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: normal;
  padding-left: 15px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-size: 14px;
}

/* 表格行的背景色样式 */
.table-row {
  z-index: 1;
  transition: background-color 0.3s ease;
  background-image: url('../assets/img/module2/table.png');
  background-size: cover;
}

.table-row-selected {
  z-index: 1;
  background-image: url('../assets/img/module2/rowselect.png');
  transition: background-color 0.3s ease;
  background-size: cover;
}

/* 悬停行的背景色 */
.table-row:hover {
  background-image: linear-gradient(to right, rgb(127, 140, 222), rgba(255, 255, 255, 0));
  background-color: rgba(58, 58, 58, 0.5);
}

.table-location {
  position: absolute;
  top: 80px;
  left: 0%;
  width: 100%;
  height: 100%;
  /* background-color: white; */
}

.table-expand-button {
  position: absolute;
  background-image: url(../assets/img/module2/zhankai.png);
  background-size: 100% 100%;
  /* top: 39vh; */
  left: 37.5%;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
}

.table-retract-button-pr {
  position: absolute;
  background-image: url(../assets/img/module2/shouqi.png);
  background-size: 100% 100%;
  /* top: 39vh; */
  left: 37.5%;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
}

.table1::-webkit-scrollbar {
  width: 2px;
}

.table1::-webkit-scrollbar {
  background-color: rgba(0, 16, 29, 0.5) !important;
}

.table1::-webkit-scrollbar-thumb {
  background: #0378FF;
  border-radius: 10px;
}


.switch-btn-group {
  display: flex;
  width: 100%;
  margin-top: 10px;
  gap: 10px;
  /* 控制按钮之间的间隙 */
}


.switch-btn-left,
.switch-btn-right {
  flex: 1;
  padding: 6px 0;
  /* 更紧凑的高度 */
  border: none;
  cursor: pointer;
  background: url('~@/assets/img/combined/button_choice_unselected.png') no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 14px;
  /* 字体变小一点 */
  line-height: 1.2;
  transition: all 0.3s ease;
  pointer-events: auto;
  text-align: center;
  border-radius: 6px;
}


.switch-btn-left {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* 可选：点击后的激活状态样式（比如切换背景图） */
.switch-btn-left.active,
.switch-btn-right.active {
  background: url('~@/assets/img/combined/button_choice_selected.png') no-repeat;
  background-size: 100% 100%;
  font-weight: bold;
}
</style>